$(function () {
    // 放大镜
    // 小图片的轮播
    let num = 0;
    $('.arrow_left').on('click', function () {
        num++;
        if (num > 2) {
            num = 2;
        }
        $('.scrolla').css('position', 'relative')
        $('.scrolla').stop().animate({ left: num * -76 })
        console.log(num);
    })
    $('.arrow_right').on('click', function () {
        num--
        if (num < 0) {
            num = 0;
        }
        $('.scrolla').css('position', 'relative')
        $('.scrolla').stop().animate({ left: num * -76 })
    })

    // 点击li图片切换大图
    $('.scrolla>li').on('click', function () {
        let smallSrc = $(this).find('img').attr('src');
        $('.bigbox').find('img').attr('src', smallSrc)
        $(this).addClass('666').siblings().removeClass('666')
    })

    // 移入放大
    $('.bigbox>img').on('mouseenter', function () {
        // 改变大盒子img的src
        let smallSrc = $(this).attr('src');
        let arr = smallSrc.split(".")
        let newSrc = arr[0] + 1 + "." + arr[1]
        $(this).attr('src', newSrc)
    }).on('mousemove', function (e) {
        // 让大图动起来
        // 获取鼠标到box的距离
        let disX = parseInt(e.pageX - $('.bigbox').offset().left);
        let disY = parseInt(e.pageY - $('.bigbox').offset().top);
        $(this).css('position', 'absolute');
        $(this).css({
            left: -1 * disX,
            top: -1 * disY,
        })
    }).on('mouseleave', function () {
        let haiyuan = $('.666').find('img').attr('src')
        $('.bigbox').find('img').attr('src', haiyuan);
        $('.bigbox').find('img').css({ top: 0, bottom: 0, left: 0, right: 0 })
    })

    // 选择商品
    $('.line7>.6fei').find('li').on('click', function () {
        $(this).css({
            borderColor: 'red'
        }).siblings().css({
            borderColor: '#ccc'
        })
    })

    // 底部置顶效果
    $('.right_bl>ul').find('li').on('click', function () {
        let current = $('.right_bl>ul').offset().top;
        $('html,body').animate({ scrollTop: current })
    })


    // tab切换
    $('.right_bl>ul').find('li').on('click', function () {
        let $index = $(this).index();
        $('.right_bl>ol').find('li').eq($index).show().siblings().hide()
    })


    // 右下角功能
    // 购物车
    $('.shopping').hide()
    $('.rightBottom>li').eq(0).on('click', function () {
        $('.shopping').show(1000)
        $('.rightBottom').animate({ right: 282 }, 1000).find('li').eq(0).css('backgroundColor', "#cdcdcd")
        $('.del').on('click', function () {
            $(this).parents('.shopping').hide(1000)
            $('.rightBottom').animate({ right: 0 }, 1000)
            $('.rightBottom').find('li:eq(0)').css('backgroundColor', "#FFF");
        })
    })
    // 回到顶部
    $('.rightBottom>li').eq(4).on('click', function () {
        $('html,body').animate({ scrollTop: 0 })
    })


    // 飞入购物车效果
    $('.line9').find('.gogo').on('click', function () {
        $.ajax({
            url: '/api/getList',
        }).then(function (res) {
            console.log(res);
            let li = $(`<li style="position:relative"><img style="height:180px;width:280px" src=${res[0].p_imgs[0]}><span style="fontSize:12px">名称:${res[0].pname}</span><span><br />单价${res[0].pprice}</span><span style="position:absolute;top:4px;left:256px" class="del2">X</span></li>`);
            $('.moveAdd').append(li)
            res[0].num = Number($('.line8 #math6').val());
            localStorage.setItem('cart', JSON.stringify(res[0]))
        })
        // 通过li获取图片,克隆
        let cloneImg = $('.666').find('img').clone(true);
        $("body").append(cloneImg);
        // 获取 加入购物车 的标签位置 给克隆元素添加位置
        let addShoppingCarPosition = $(this).offset();
        cloneImg.css({
            position: "absolute",
            left: addShoppingCarPosition.left,
            top: addShoppingCarPosition.top,
            width: 180
        })
        // target位置
        let target = $('.rightBottom').eq(0).offset();
        cloneImg.animate({
            left: target.left,
            top: target.top,
            width: 0,
            height: 0
        }, 1500, function () {
            $('.rightBottom>li').eq(0).triggerHandler('click');
        })

        // 委托事件
        $('.shopping .line3').on('click', '.del2', function () {
            $(this).parents('li').remove()
        })
    })

    // 打分系统
    let shixing = "★";
    let kongxing = "☆";
    $('#star').children("dt").on("mouseenter", function () {
        $(this).text(shixing).prevAll().text(shixing).end().nextAll().text(kongxing)

    });
    $('#star').on("mouseleave", function () {
        $(this).children().text(kongxing);
        $(this).find('[class=selected]').text(shixing).prevAll().text(shixing).end().nextAll().text(kongxing)
    })

    $('#star').children().on("click", function () {
        console.log($(this).prevAll());
        $(this).addClass("selected").siblings().removeClass("selected")
    })
})